<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            color: #292929;
        }

        .table_title {
            font-weight: bold;
            height: 50px;
            background-color: #dddddd;
        }

        .active {
            background-color: #50abda;
            background-color: rgba(80, 142, 218, 0.2);
        }

        .table_row {
            height: 40px;
        }

        .r_black_title {
            background-color: #4b4b4b;
            width: 100vw;
            height: 80px;
            text-align: center;
            position: absolute;
        }

        .title_btn {
            background: none;
            font-size: 22px;
            border: 0;
            color: #fff;
            margin-top: 10px;
        }

        .title_line {
            background-color: #fff;
            width: 50px;
            height: 5px;
            border-radius: 10px;

            transition: all 0.2s ease;
        }
    </style>
    <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/css/default.css"/>
    <link rel="stylesheet" type="text/css" href="/css/component.css"/>

</head>

<body class="web-font">
<div class="r_black_title">
    <div>
        <button class="title_btn" id="jihua">计划</button>
        <button class="title_btn" id="yonghu">用户</button>
    </div>
    <div class="title_line"/>
</div>

<#--${name[0].plan.plan_title}-->
<table rules=all style="border: 1px #292929 solid;width: 100%;font-size: 16px;" id="plan_table">
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<#--<script src="/js/index.js"></script>-->
    <script src="/js/modernizr.custom.js"></script>

    <script type="text/javascript">

        function getPlanList() {
            $.ajax({
                // url: "https://www.niurenshuma.cn:443/templates/t",
                url: "https://192.168.1.164:443/templates/getPlan",
                data: {},
                type: "post",
                dataType: "json",
                cache: false,
                async: false,
                contentType: 'application/x-www-form-urlencoded',
                success: function (e) {
                    console.log("list", e);
                    $("#plan_table").html("");
                    $("#plan_table").append("<tr  class=\"table_title table_row\">" +
                            " <td style=\"padding-left: 5px;padding-right: 5px;\">计划id</td>" +
                            "<td style=\"padding-left: 5px;padding-right: 5px;\">计划名称</td>" +
                            "< <td style=\"padding-left: 5px;padding-right: 5px;\">创建人</td>" +
                            "<td style=\"padding-left: 5px;padding-right: 5px;\">合作人</td>" +
                            "<td style=\"padding-left: 5px;padding-right: 5px;\">创建时间</td>" +
                            "<td style=\"padding-left: 5px;padding-right: 5px;\">最后编辑时间</td>" +
                            "<td style=\"padding-left: 5px;padding-right: 5px;\">最后登陆时间</td>" +
                            "</tr>");
                    var list = e;

                    // document.querySelectorAll( '.md-trigger' )

                    for (var i = 0; i < list.length; i++) {
                        $("#plan_table").append("<tr class=\"table_row md-trigger\" data-plan_id=\"" + list[i].plan_id + "\" data-modal=\"modal-1\"  onclick=\"dialog_show()\">" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">" + list[i].plan_id + "</td>" +
                                " <td style=\"width:500px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;\">" + list[i].plan_title + "</td>" +
                                " <td style=\"padding-left: 5px;padding-right: 5px;\">" + list[i].creator + "</td>" +
                                "<td style=\"padding-left: 5px;padding-right: 5px;\">" + list[i].userName + "</td>" +
                                "<td style=\"padding-left: 5px;padding-right: 5px;\">" + list[i].plan_create_time + "</td>" +
                                "<td style=\"padding-left: 5px;padding-right: 5px;\">" + list[i].last_edit_time + "</td>" +
                                "<td style=\"padding-left: 5px;padding-right: 5px;\">" + list[i].last_login_time + "</td>" +
                                "</tr>");
                    }

                    $(".md-close").on('click', function (e) {
                        $("#modal-1").removeClass("md-show");

                        var xx = $('#jihua')[0].offsetLeft;
                        $('.title_line').css("margin-left", xx + 25 + "px");
                    })

                    getTaskClick();
                },
                error: function (e) {
                    alert(e);
                }
            });
        }

        function dialog_show() {

            $("#modal-1").addClass("md-show");
        }

        /**
         *  获取任务
         */
        function getTaskClick() {
            $('tr').on('click', function (e) {
                $(this).addClass('active');
                $(this).siblings().removeClass('active');

                console.log("plan_id", e.currentTarget.dataset.plan_id);
                $.ajax({
                    // url: "https://www.niurenshuma.cn:443/templates/t",
                    url: "https://192.168.1.164:443/templates/t",
                    data: {planId: e.currentTarget.dataset.plan_id},
                    type: "post",
                    dataType: "json",
                    cache: false,
                    async: false,
                    contentType: 'application/x-www-form-urlencoded',
                    success: function (e) {
                        $("#r_table").html("");
                        $("#r_table").append("<tr  class=\"table_title table_row\">" +
                                "<td  style=\"width:300px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;\">任务名称</td>" +
                                "<td style=\"padding-left: 5px;padding-right: 5px;\">创建时间</td>" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">是否完成</td>" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">创建人</td>" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">最后编辑时间</td>" +
                                "</tr>");
                        var list = e;
                        for (var i = 0; i < list.length; i++) {
                            var strCheck = "否";
                            if (list[i].is_checked) {
                                strCheck = "是";
                            } else {
                                strCheck = "否";
                            }
                            $("#r_table").append("<tr class=\"table_row\">" +
                                    "<td  style=\"width:200px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;\">" + list[i].task_title + "</td>" +
                                    "<td style=\"width:200px;padding-left: 5px;padding-right: 5px;\">" + list[i].task_create_time + "</td>" +
                                    "<td style=\"width:50px;padding-left: 5px;padding-right: 5px;\">" + strCheck + "</td>" +
                                    "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">" + list[i].creator + "</td>" +
                                    "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">" + list[i].task_last_edit_time + "</td>" +
                                    "</tr>");
                            console.log("task", list[i]);
                        }
                    },
                    error: function (e) {
                        alert(e);
                    }
                });
            })
        }

        /**
         *  获取用户
         */
        function getAllUser() {
            $.ajax({
                // url: "https://www.niurenshuma.cn:443/templates/t",
                url: "https://192.168.1.164:443/templates/getUser",
                data: {},
                type: "post",
                dataType: "json",
                cache: false,
                async: false,
                contentType: 'application/x-www-form-urlencoded',
                success: function (e) {

                    $("#plan_table").html("");
                    $("#plan_table").append("<tr  class=\"table_title table_row\">" +
                            "<td  style=\"width:300px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;\">任务名称</td>" +
                            "<td style=\"padding-left: 5px;padding-right: 5px;\">创建时间</td>" +
                            "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">是否完成</td>" +
                            "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">创建人</td>" +
                            "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">最后编辑时间</td>" +
                            "</tr>");
                    var list = e;
                    console.log("user", e);

                    for (var i = 0; i < list.length; i++) {
                        var strCheck = "否";
                        if (list[i].is_checked) {
                            strCheck = "是";
                        } else {
                            strCheck = "否";
                        }
                        $("#plan_table").append("<tr class=\"table_row\">" +
                                "<td  style=\"width:200px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;\">" + list[i].task_title + "</td>" +
                                "<td style=\"width:200px;padding-left: 5px;padding-right: 5px;\">" + list[i].task_create_time + "</td>" +
                                "<td style=\"width:50px;padding-left: 5px;padding-right: 5px;\">" + strCheck + "</td>" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">" + list[i].creator + "</td>" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">" + list[i].task_last_edit_time + "</td>" +
                                "</tr>");
                    }
                },
                error: function (e) {
                    alert(e);
                }
            });
        }

        $(function () {
            var xx = $('#jihua')[0].offsetLeft;
            $('.title_line').css("margin-left", xx + 25 + "px");
            $('button').on('click', function (e) {
                azuo = e.currentTarget.offsetLeft;
                $('.title_line').css("margin-left", azuo + 25 + "px");
                console.log(e);
                if(e.target.id == 'yonghu'){
                    getAllUser();
                }else{
                    getPlanList();
                }
            })

            getPlanList();
        })
    </script>

</table>
<div id="dialog"></div>

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>任务</h3>
        <div>
            <div style="height:auto;max-height:80vh;overflow:scroll;">
                <table id="r_table" rules=all
                       style="border: 1px #292929 solid;width: 100%;margin-bottom: 20px;font-size: 16px;">
                </table>
            </div>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>
<#--${name}-->

<!-- classie.js by @desandro: https://github.com/desandro/classie -->
<script src="/js/classie.js"></script>
<script src="/js/modalEffects.js"></script>

<!-- for the blur effect -->
<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
<#--<script>-->
<#--// this is important for IEs-->
<#--var polyfilter_scriptpath = '/js/';-->
<#--</script>-->
<#--<script src="/js/cssParser.js"></script>-->
<#--<script src="/js/css-filters-polyfill.js"></script>-->
<div id="pager">

</div>
</body>
</html>